<template>
	<div class="map-chart">
		<div class="geo-container" ref="chartEl"></div>
	</div>
</template>
<script>
	import axios from 'axios';
	import * as echarts from 'echarts'
	import {
		getMiddleMap,
		getAdCode
	} from "@/api/his/screen";
	export default {
		name: 'MapChart',
		data() {
			return {
				chartInstance: null,
				dataset: [

				]
			}
		},
		watch: {
			mapData() {
				this.initChart()
			}
		},
		methods: {
			resizeChart() {
				this.chartInstance?.resize()
			},
			initChart() {
				if (!this.chartInstance) {
					this.chartInstance = echarts.init(this.$refs.chartEl)
					getAdCode().then(response => {
						var level = response.data.data.level
						var adcode = response.data.data.adcode
						var purl = ''
						if(level==1 || level==2){
							purl = 'https://geo.datav.aliyun.com/areas_v3/bound/'+adcode+'_full.json'
						}else{
							purl = '/map/'+adcode+'.json'
						}
						axios.get(purl).then(response => {
								var map = response.data
								echarts.registerMap('HC', map)
							})
							.catch(error => {
								console.error('Error loading JSON data:', error);
							});

					});



				}
				const that = this
				getMiddleMap().then(response => {
					this.dataset = response.data
					console.log(this.dataset)
					this.chartInstance.setOption({
						dataset: {
							source: this.dataset,
						},
						tooltip: {
							backgroundColor: '#4373F1',
							extraCssText: {
								borderRadius: '10px'
							},
							position(point, params, dom, rect) {
								return [point[0] - 109, point[1] - 128]
							},
							formatter(v) {
								const data = v.data
								const div = document.createElement('div')
								div.style.borderRadius = '10px'
								div.innerHTML = `
                    <div style="width:218px;height:98px;padding:17px 20px 28px;">
                        <div style="font-weight: 500;font-size: 20px;color: #FFFFFF;line-height: 20px;">预警医院数量</div>
                        <div style="display:flex;align-items:flex-end;height:18px;margin-top:12px;">
                            <div style="font-weight: bold;font-size: 24px;color: #FFFFFF;line-height: 18px;height:18px;">${data.count}</div>
                            <div style="margin-left:6px;font-weight: bold;font-size: 14px;color: #FFFFFF;line-height: 14px;">占比${data.percent}</div>
                        </div>
                    </div>
                    `
								return div
							},
						},
						geo: {
							map: 'HC',
						},
						series: [{
								type: 'map',
								map: 'HC',
								label: {
									show: false
								},
								itemStyle: {
									areaColor: '#fff',
									shadowBlur: '#96B1F7',
									borderWidth: 1,
									borderColor: '#96B1F7'
								},
								emphasis: {
									label: {
										show: false
									},
									itemStyle: {
										areaColor: '#93AEF3',
										color: '#93AEF3'
									},
								},
							},
							{
								type: 'effectScatter',
								coordinateSystem: 'geo',
								symbolSize: 10,
								rippleEffect: {
									color: '#4373F1',
									number: 1,
									period: 5,
									scale: 3,
								},
								label: {
									show: true,
									formatter(v) {
										return v.name
									},
									color: '#1F1F1F',
									position: ['-100%', '200%']
								},
								itemStyle: {
									color: '#4373F1',
								},
								data: that.dataset
							}
						],
					}, {
						notMerge: true
					})
				});



			},
			setActive(name) {
				const index = this.dataset.findIndex(v => v.name === name)
				if (index === -1) return
				this.chartInstance.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: index,
				})
			}
		},
		mounted() {
			window.addEventListener('resize', this.resizeChart)
			this.initChart()
			this.setActive('沙湾镇')
		},
		beforeDestroyed() {
			this.chartInstance?.dispose()
			this.chartInstance = null
			window.removeEventListener('resize', this.resizeChart)
		}
	}
</script>

<style scoped>
	.map-chart {
		height: 100%;
		width: 100%;
		min-height: 600px;
	}

	.geo-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
@/assets/geo-json/SC
